<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>霍格沃茨魔法画图室</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Crimson+Text:wght@400;600&display=swap" rel="stylesheet">
</head>
<body>
    <!-- 欢迎页面 -->
    <div id="welcomePage" class="welcome-page">
        <!-- 倒计时容器 -->
        <div class="countdown-container">
            <div class="countdown-title">回到霍格沃茨</div>
            <div class="countdown-timer" id="countdownTimer">
                <div class="countdown-item">
                    <span class="countdown-number" id="days">00</span>
                    <span class="countdown-label">天</span>
                </div>
                <div class="countdown-item">
                    <span class="countdown-number" id="hours">00</span>
                    <span class="countdown-label">时</span>
                </div>
                <div class="countdown-item">
                    <span class="countdown-number" id="minutes">00</span>
                    <span class="countdown-label">分</span>
                </div>
                <div class="countdown-item">
                    <span class="countdown-number" id="seconds">00</span>
                    <span class="countdown-label">秒</span>
                </div>
            </div>
        </div>
        
        <!-- 电影回顾按钮 -->
        <div class="movie-review-container">
            <button id="movieReviewBtn" class="movie-review-btn">
                <span class="movie-icon">🎬</span>
                <span class="movie-text">电影回顾</span>
            </button>
        </div>
        
        <!-- 烟花特效容器 -->
        <div id="fireworksContainer" class="fireworks-container"></div>
        
        <div class="welcome-content">
            <h1>欢迎来到霍格沃茨</h1>
            <div class="house-crests">
                <div class="crest sticker1"></div>
                <div class="crest sticker2"></div>
                <div class="crest sticker3"></div>
                <div class="crest sticker4"></div>
            </div>
            <div class="music-controls">
                <button id="musicToggleBtn" class="music-btn">🎵 播放音乐</button>
                <div class="volume-control">
                    <label>音量:</label>
                    <input type="range" id="volumeSlider" min="0" max="1" step="0.1" value="0.5">
                </div>
            </div>
            <button id="enterButton" class="magic-button">进入魔法世界</button>
        </div>
        
        <!-- 分院按钮 -->
                    <div class="sorting-button-container">
                <button id="sortingButton" class="sorting-button">
                    <span class="sorting-icon">🎩</span>
                    <span class="sorting-text">分院测试</span>
                </button>
            </div>
            <div class="wand-button-container">
                <button id="wandButton" class="wand-button">
                    <span class="wand-icon">🪄</span>
                    <span class="wand-text">魔杖测试</span>
                </button>
            </div>
        
        <!-- 添加背景音乐 -->
        <audio id="backgroundMusic" loop>
            <source src="海德薇变奏曲 [安眠的钢琴曲]_爱给网_aigei_com.mp3" type="audio/mpeg">
            您的浏览器不支持音频播放。
        </audio>
    </div>

    <!-- 主界面 -->
    <div id="mainApp" class="hidden">
        <!-- 顶部任务栏 -->
        <header class="toolbar">
            <div class="toolbar-left">
                <div class="hogwarts-title">
                    <h2>🪄 霍格沃茨魔法画图室</h2>
                </div>
            </div>
            
            <div class="toolbar-center">
                <div class="tool-group color-group">
                    <div class="color-controls-row">
                        <div class="color-dropdown">
                            <button id="colorDropdownBtn" class="tool-btn">🎨 颜色</button>
                            <div class="color-dropdown-content" id="colorDropdownContent">
                                <div class="color-theme-option" data-theme="morandi">🎨 莫兰迪</div>
                                <div class="color-theme-option" data-theme="mondrian">🎨 蒙德里安</div>
                                <div class="color-theme-option" data-theme="macaron">🎨 马卡龙</div>
                                <div class="color-theme-option" data-theme="memphis">🎨 孟菲斯</div>
                                <div class="color-theme-option" data-theme="rococo">🎨 洛可可</div>
                            </div>
                        </div>
                        <div class="custom-color-btn" id="customColorBtn" title="自定义颜色">
                            <div class="color-preview" id="colorPreview"></div>
                        </div>
                    </div>
                    <div class="quick-colors" id="quickColors">
                        <!-- 颜色按钮将通过JavaScript动态生成 -->
                    </div>
                    <!-- 自定义颜色圆盘 -->
                    <div class="color-wheel-container" id="colorWheelContainer">
                        <div class="color-wheel" id="colorWheel">
                            <div class="color-wheel-center">
                                <input type="color" id="colorPicker" value="#000000">
                            </div>
                        </div>
                        <!-- RGB输入区域 -->
                        <div class="rgb-input-container">
                            <div class="rgb-input-group">
                                <label>R:</label>
                                <input type="number" id="rgbR" min="0" max="255" value="0" class="rgb-input">
                            </div>
                            <div class="rgb-input-group">
                                <label>G:</label>
                                <input type="number" id="rgbG" min="0" max="255" value="0" class="rgb-input">
                            </div>
                            <div class="rgb-input-group">
                                <label>B:</label>
                                <input type="number" id="rgbB" min="0" max="255" value="0" class="rgb-input">
                            </div>
                            <button id="applyRgbBtn" class="rgb-apply-btn">应用</button>
                        </div>
                    </div>
                </div>
                
                <div class="tool-group brush-group">
                    <div class="brush-dropdown">
                        <button id="brushDropdownBtn" class="tool-btn">🖌️ 画笔</button>
                        <div class="brush-dropdown-content" id="brushDropdownContent">
                            <div class="brush-option" data-type="normal">🖌️ 普通画笔</div>
                            <div class="brush-option" data-type="pencil">✏️ 铅笔</div>
                            <div class="brush-option" data-type="marker">🖍️ 马克笔</div>
                            <div class="brush-option" data-type="crayon">🖍️ 蜡笔</div>
                            <div class="brush-option" data-type="airbrush">🎨 喷枪</div>
                        </div>
                    </div>
                    <div class="brush-size-control" id="brushSizeControl">
                        <label>粗细:</label>
                        <input type="range" id="brushSize" min="1" max="50" value="5">
                        <span id="brushSizeValue">5</span>
                    </div>
                </div>
                
                <div class="tool-group eraser-group">
                    <div class="eraser-dropdown">
                        <button id="eraserDropdownBtn" class="tool-btn">🧽 橡皮</button>
                        <div class="eraser-dropdown-content" id="eraserDropdownContent">
                            <div class="eraser-option" data-action="eraser">🧽 橡皮擦</div>
                            <div class="eraser-option" data-action="clear">🗑️ 清空画布</div>
                        </div>
                    </div>
                    <div class="eraser-size-control" id="eraserSizeControl">
                        <label>橡皮大小:</label>
                        <input type="range" id="eraserSize" min="5" max="100" value="20">
                        <span id="eraserSizeValue">20</span>
                    </div>
                </div>
                
                <div class="tool-group shape-group">
                    <div class="shape-dropdown">
                        <button id="shapeDropdownBtn" class="tool-btn">🔷 形状</button>
                        <div class="shape-dropdown-content" id="shapeDropdownContent">
                            <div class="shape-option" data-shape="rectangle">⬜ 矩形</div>
                            <div class="shape-option" data-shape="circle">⭕ 圆形</div>
                            <div class="shape-option" data-shape="triangle">🔺 三角形</div>
                            <div class="shape-option" data-shape="line">➖ 直线</div>
                            <div class="shape-option" data-shape="arrow">➡️ 箭头</div>
                            <div class="shape-option" data-shape="star">⭐ 五角星</div>
                            <div class="shape-option" data-shape="heart">❤️ 心形</div>
                            <div class="shape-option" data-shape="diamond">💎 菱形</div>
                        </div>
                    </div>
                    <div class="shape-size-control" id="shapeSizeControl">
                        <label>形状大小:</label>
                        <input type="range" id="shapeSize" min="10" max="200" value="50">
                        <span id="shapeSizeValue">50</span>
                    </div>
                </div>
                
                <div class="tool-group">
                    <button id="undoBtn" class="tool-btn">↶</button>
                    <button id="saveBtn" class="tool-btn">💾</button>
                    <button id="importImageBtn" class="tool-btn">📷</button>
                </div>
            </div>
            
            <div class="toolbar-right">
                <div class="image-counter" id="imageCounter" title="画布上的图片数量">
                    <span class="counter-icon">🖼️</span>
                    <span class="counter-text">0</span>
                </div>
                <button id="voiceBtn" class="tool-btn">🎤 语音检测</button>
                <button id="spellsBtn" class="tool-btn">📜 咒语</button>
                <button id="templatesBtn" class="tool-btn">🎨 图纸</button>
            </div>
        </header>

        <!-- 主要内容区域 -->
        <main class="main-content">
            <!-- 左侧魔法装饰滚轮 -->
            <aside class="sidebar">
                <div class="magical-wheel">
                    <div class="wheel-container">
                        <div class="wheel-item" data-term="魔杖">
                            <div class="magical-icon">🪄</div>
                            <div class="magical-text">魔杖</div>
                        </div>
                        <div class="wheel-item" data-term="分院帽">
                            <div class="magical-icon">🎩</div>
                            <div class="magical-text">分院帽</div>
                        </div>
                        <div class="wheel-item" data-term="凤凰">
                            <div class="magical-icon">🦅</div>
                            <div class="magical-text">凤凰</div>
                        </div>
                        <div class="wheel-item" data-term="摄魂怪">
                            <div class="magical-icon">👻</div>
                            <div class="magical-text">摄魂怪</div>
                        </div>
                        <div class="wheel-item" data-term="魁地奇">
                            <div class="magical-icon">🏈</div>
                            <div class="magical-text">魁地奇</div>
                        </div>
                        <div class="wheel-item" data-term="霍格沃茨特快">
                            <div class="magical-icon">🚂</div>
                            <div class="magical-text">霍格沃茨特快</div>
                        </div>
                        <div class="wheel-item" data-term="活点地图">
                            <div class="magical-icon">🗺️</div>
                            <div class="magical-text">活点地图</div>
                        </div>
                        <div class="wheel-item" data-term="时间转换器">
                            <div class="magical-icon">⏰</div>
                            <div class="magical-text">时间转换器</div>
                        </div>
                        <div class="wheel-item" data-term="曼德拉草">
                            <div class="magical-icon">🌱</div>
                            <div class="magical-text">曼德拉草</div>
                        </div>
                        <div class="wheel-item" data-term="夜骐">
                            <div class="magical-icon">🦇</div>
                            <div class="magical-text">夜骐</div>
                        </div>
                    </div>
                </div>
            </aside>

            <!-- 画布区域 -->
            <section class="canvas-section">
                <canvas id="drawingCanvas" width="1000" height="700"></canvas>
                <div class="canvas-overlay">
                    <div class="voice-indicator" id="voiceIndicator" style="display: none;">
                        <span>🎤 正在聆听咒语...</span>
                    </div>
                </div>
                <!-- 标签1 - 放在画布内部左下角 -->
                <div class="sticker-label">
                    <img src="图纸/标签1.png" alt="标签1" class="sticker-image">
                </div>
                <!-- 帮助按钮 -->
                <div class="help-btn" id="helpBtn" title="界面介绍和使用教程">
                    <span>❓</span>
                </div>
            </section>
            
            <!-- 音频按钮 -->
            <div class="audio-btn" id="audioBtn">
                <span>🎵</span>
            </div>
            <!-- 设置按钮 -->
            <div class="settings-btn" id="settingsBtn">
                <span>⚙️</span>
            </div>
        </main>
    </div>

    <!-- 咒语手册弹窗 -->
    <div id="spellsModal" class="modal">
        <div class="modal-content spells-content">
            <div class="modal-header">
                <h2>📜 霍格沃茨咒语手册</h2>
                <button class="close-btn" onclick="closeSpellsModal()">×</button>
            </div>
            <div class="spells-grid">
                <!-- 咒语将通过JavaScript动态生成 -->
            </div>
        </div>
    </div>

    <!-- 图纸库弹窗 -->
    <div id="templatesModal" class="modal">
        <div class="modal-content templates-content">
            <div class="modal-header">
                <h2>🎨 魔法图纸库</h2>
                <button class="close-btn" onclick="closeTemplatesModal()">×</button>
            </div>
            <div class="templates-categories">
                <!-- 图纸分类将通过JavaScript动态生成 -->
            </div>
        </div>
    </div>

    <!-- 咒语特效容器 -->
    <div id="spellEffects" class="spell-effects-container"></div>
    
    <!-- 标签2 PPT特效容器 -->
    <div id="label2Effect" class="label2-effect">
        <img src="图纸/标签2.png" alt="标签2">
    </div>

    <!-- 帮助教程弹窗 -->
    <div id="helpModal" class="modal">
        <div class="modal-content help-content">
            <div class="modal-header">
                <h2>📚 霍格沃茨魔法画图室 - 使用教程</h2>
                <button class="close-btn" onclick="closeHelpModal()">×</button>
            </div>
            <div class="help-content-body">
                <div class="help-section">
                    <h3>🎨 界面介绍</h3>
                    <div class="help-grid">
                        <div class="help-item">
                            <div class="help-icon">🎨</div>
                            <div class="help-text">
                                <strong>颜色选择</strong><br>
                                五大色系主题 + 自定义颜色圆盘 + RGB精确输入
                            </div>
                        </div>
                        <div class="help-item">
                            <div class="help-icon">🖌️</div>
                            <div class="help-text">
                                <strong>画笔工具</strong><br>
                                普通画笔、铅笔、马克笔、蜡笔、喷枪
                            </div>
                        </div>
                        <div class="help-item">
                            <div class="help-icon">🧽</div>
                            <div class="help-text">
                                <strong>橡皮工具</strong><br>
                                可调节大小橡皮擦 + 清空画布功能
                            </div>
                        </div>
                        <div class="help-item">
                            <div class="help-icon">🔷</div>
                            <div class="help-text">
                                <strong>形状工具</strong><br>
                                矩形、圆形、三角形、直线、箭头、五角星、心形、菱形。点击开始，拖动预览，再次点击完成
                            </div>
                        </div>
                        <div class="help-item">
                            <div class="help-icon">📜</div>
                            <div class="help-text">
                                <strong>咒语手册</strong><br>
                                经典魔法咒语 + 语音朗读 + 视觉特效
                            </div>
                        </div>
                        <div class="help-item">
                            <div class="help-icon">🏰</div>
                            <div class="help-text">
                                <strong>图纸库</strong><br>
                                六大分类图纸 + 一键加载 + 拖拽移动 + 智能缩放
                            </div>
                        </div>
                        <div class="help-item">
                            <div class="help-icon">🎵</div>
                            <div class="help-text">
                                <strong>音频控制</strong><br>
                                海德薇变奏曲 + 音量调节 + 播放控制
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="help-section">
                    <h3>🚀 快速使用指南</h3>
                    <div class="help-steps">
                        <div class="help-step">
                            <div class="step-number">1</div>
                            <div class="step-content">
                                <strong>选择画笔</strong>：点击画笔按钮选择不同画笔类型，调节粗细
                            </div>
                        </div>
                        <div class="help-step">
                            <div class="step-number">2</div>
                            <div class="step-content">
                                <strong>选择颜色</strong>：使用色系主题或自定义颜色圆盘选择颜色
                            </div>
                        </div>
                        <div class="help-step">
                            <div class="step-number">3</div>
                            <div class="step-content">
                                <strong>开始绘画</strong>：在白纸上自由绘画，支持鼠标和触摸
                            </div>
                        </div>
                        <div class="help-step">
                            <div class="step-number">4</div>
                            <div class="step-content">
                                <strong>添加图纸</strong>：点击图纸按钮，选择魔法图纸添加到画布，单击选中、双击放大、三击缩小、Delete删除
                            </div>
                        </div>
                        <div class="help-step">
                            <div class="step-number">5</div>
                            <div class="step-content">
                                <strong>施放咒语</strong>：点击咒语按钮，选择咒语施放魔法特效
                            </div>
                        </div>
                        <div class="help-step">
                            <div class="step-number">6</div>
                            <div class="step-content">
                                <strong>保存作品</strong>：点击保存按钮下载您的魔法作品
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="help-section">
                    <h3>🎯 快捷键</h3>
                    <div class="help-shortcuts">
                        <div class="shortcut-item">
                            <span class="shortcut-key">Ctrl + Z</span>
                            <span class="shortcut-desc">撤回上一步</span>
                        </div>
                        <div class="shortcut-item">
                            <span class="shortcut-key">Ctrl + S</span>
                            <span class="shortcut-desc">保存作品</span>
                        </div>
                        <div class="shortcut-item">
                            <span class="shortcut-key">单击图片</span>
                            <span class="shortcut-desc">选中图片</span>
                        </div>
                        <div class="shortcut-item">
                            <span class="shortcut-key">双击图片</span>
                            <span class="shortcut-desc">放大图片</span>
                        </div>
                        <div class="shortcut-item">
                            <span class="shortcut-key">三击图片</span>
                            <span class="shortcut-desc">缩小图片</span>
                        </div>
                        <div class="shortcut-item">
                            <span class="shortcut-key">Delete</span>
                            <span class="shortcut-desc">删除选中图片</span>
                        </div>
                        <div class="shortcut-item">
                            <span class="shortcut-key">Ctrl + Delete</span>
                            <span class="shortcut-desc">删除所有图片</span>
                        </div>
                        <div class="shortcut-item">
                            <span class="shortcut-key">拖拽图片</span>
                            <span class="shortcut-desc">移动图片位置</span>
                        </div>
                    </div>
                </div>
                
                <div class="help-section">
                    <h3>💡 小贴士</h3>
                    <div class="help-tips">
                        <div class="tip-item">✨ 使用不同色系主题可以快速获得专业配色</div>
                        <div class="tip-item">🎵 开启背景音乐让绘画更有魔法氛围</div>
                        <div class="tip-item">📜 施放咒语时会有语音朗读和视觉特效</div>
                        <div class="tip-item">🏰 图纸库中的图片可以自由移动和缩放（单击选中、双击放大、三击缩小、Delete删除）</div>
                        <div class="tip-item">⚙️ 在设置中可以个性化配置各种参数</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 音频控制面板 -->
    <div id="audioControlPanel" class="audio-control-panel">
        <h4>🎵 音频控制</h4>
        <div class="volume-control">
            <label>音量:</label>
            <input type="range" id="audioVolumeSlider" min="0" max="1" step="0.1" value="0.5">
            <span id="audioVolumeValue">50%</span>
        </div>
        <button id="audioToggleBtn" class="audio-toggle-btn">播放音乐</button>
    </div>

    <!-- 电影回顾模态框 -->
    <div id="movieReviewModal" class="modal">
        <div class="modal-content movie-review-content">
            <div class="modal-header">
                <h2>🎬 哈利波特电影系列</h2>
                <button class="close-btn" onclick="closeMovieReviewModal()">×</button>
            </div>
            <div class="movie-gallery">
                <div class="movie-poster-item" data-movie="1">
                    <div class="movie-poster-container">
                        <img src="图纸/电影/哈利波特1.png" alt="哈利波特与魔法石" class="movie-poster">
                        <div class="movie-overlay">
                            <div class="movie-title">
                                <a href="https://www.iqiyi.com/v_19rrjbdi0s.html?s3=pca_115_IP_card&s4=0&vfrmblk=pca_115_IP_card&vfrm=3&s2=3&vfrmrst=0" target="_blank" class="movie-link">哈利波特与魔法石</a>
                            </div>
                            <div class="movie-year">2001</div>
                        </div>
                    </div>
                </div>
                <div class="movie-poster-item" data-movie="2">
                    <div class="movie-poster-container">
                        <img src="图纸/电影/哈利波特2.png" alt="哈利波特与密室" class="movie-poster">
                        <div class="movie-overlay">
                            <div class="movie-title">
                                <a href="https://www.iqiyi.com/v_19rrjbeuig.html?s3=pca_115_IP_card&s4=0&vfrmblk=pca_115_IP_card&vfrm=3&s2=3&vfrmrst=0" target="_blank" class="movie-link">哈利波特与密室</a>
                            </div>
                            <div class="movie-year">2002</div>
                        </div>
                    </div>
                </div>
                <div class="movie-poster-item" data-movie="3">
                    <div class="movie-poster-container">
                        <img src="图纸/电影/哈利波特3.png" alt="哈利波特与阿兹卡班的囚徒" class="movie-poster">
                        <div class="movie-overlay">
                            <div class="movie-title">
                                <a href="https://www.iqiyi.com/v_19rrjbevto.html?s3=pca_115_IP_card&s4=0&vfrmblk=pca_115_IP_card&vfrm=3&s2=3&vfrmrst=0" target="_blank" class="movie-link">哈利波特与阿兹卡班的囚徒</a>
                            </div>
                            <div class="movie-year">2004</div>
                        </div>
                    </div>
                </div>
                <div class="movie-poster-item" data-movie="4">
                    <div class="movie-poster-container">
                        <img src="图纸/电影/哈利波特4.png" alt="哈利波特与火焰杯" class="movie-poster">
                        <div class="movie-overlay">
                            <div class="movie-title">
                                <a href="https://www.iqiyi.com/v_19rrjbfy7k.html?s3=pca_115_IP_card&s4=0&vfrmblk=pca_115_IP_card&vfrm=3&s2=3&vfrmrst=0" target="_blank" class="movie-link">哈利波特与火焰杯</a>
                            </div>
                            <div class="movie-year">2005</div>
                        </div>
                    </div>
                </div>
                <div class="movie-poster-item" data-movie="5">
                    <div class="movie-poster-container">
                        <img src="图纸/电影/哈利波特5.png" alt="哈利波特与凤凰社" class="movie-poster">
                        <div class="movie-overlay">
                            <div class="movie-title">
                                <a href="https://www.iqiyi.com/v_19rrjbevew.html?s3=pca_115_IP_card&s4=0&vfrmblk=pca_115_IP_card&vfrm=3&s2=3&vfrmrst=0" target="_blank" class="movie-link">哈利波特与凤凰社</a>
                            </div>
                            <div class="movie-year">2007</div>
                        </div>
                    </div>
                </div>
                <div class="movie-poster-item" data-movie="6">
                    <div class="movie-poster-container">
                        <img src="图纸/电影/哈利波特6.png" alt="哈利波特与混血王子" class="movie-poster">
                        <div class="movie-overlay">
                            <div class="movie-title">
                                <a href="https://www.iqiyi.com/v_19rrk47uq8.html?s3=pca_115_IP_card&s4=0&vfrmblk=pca_115_IP_card&vfrm=3&s2=3&vfrmrst=0" target="_blank" class="movie-link">哈利波特与混血王子</a>
                            </div>
                            <div class="movie-year">2009</div>
                        </div>
                    </div>
                </div>
                <div class="movie-poster-item" data-movie="7">
                    <div class="movie-poster-container">
                        <img src="图纸/电影/哈利波特7上.png" alt="哈利波特与死亡圣器(上)" class="movie-poster">
                        <div class="movie-overlay">
                            <div class="movie-title">
                                <a href="https://www.iqiyi.com/v_19rr9gh470.html?s3=pca_115_IP_card&s4=0&vfrmblk=pca_115_IP_card&vfrm=3&s2=3&vfrmrst=0" target="_blank" class="movie-link">哈利波特与死亡圣器(上)</a>
                            </div>
                            <div class="movie-year">2010</div>
                        </div>
                    </div>
                </div>
                <div class="movie-poster-item" data-movie="8">
                    <div class="movie-poster-container">
                        <img src="图纸/电影/哈利波特7下.png" alt="哈利波特与死亡圣器(下)" class="movie-poster">
                        <div class="movie-overlay">
                            <div class="movie-title">
                                <a href="https://www.iqiyi.com/v_19rr9gh53c.html?s3=pca_115_IP_card&s4=0&vfrmblk=pca_115_IP_card&vfrm=3&s2=3&vfrmrst=0" target="_blank" class="movie-link">哈利波特与死亡圣器(下)</a>
                            </div>
                            <div class="movie-year">2011</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 设置面板 -->
    <div id="settingsPanel" class="settings-panel">
        <div class="settings-content">
            <div class="settings-header">
                <h3>⚙️ 魔法设置</h3>
                <button class="close-btn" onclick="closeSettings()">×</button>
            </div>
            <div class="settings-body">
                <div class="setting-group">
                    <h4>🎨 绘画设置</h4>
                    <div class="setting-item">
                        <label>默认画笔大小:</label>
                        <input type="range" id="defaultBrushSize" min="1" max="50" value="5">
                        <span id="defaultBrushSizeValue">5</span>
                    </div>
                    <div class="setting-item">
                        <label>默认颜色:</label>
                        <input type="color" id="defaultColor" value="#000000">
                    </div>
                </div>
                
                <div class="setting-group">
                    <h4>🔮 咒语设置</h4>
                    <div class="setting-item">
                        <label>语音朗读:</label>
                        <input type="checkbox" id="voiceEnabled" checked>
                    </div>
                    <div class="setting-item">
                        <label>语音音量:</label>
                        <input type="range" id="voiceVolume" min="0" max="1" step="0.1" value="0.8">
                        <span id="voiceVolumeValue">0.8</span>
                    </div>
                </div>
                
                <div class="setting-group">
                    <h4>🎤 语音识别</h4>
                    <div class="setting-item">
                        <label>启用语音识别:</label>
                        <input type="checkbox" id="speechRecognitionEnabled">
                    </div>
                    <div class="setting-item">
                        <label>识别语言:</label>
                        <select id="recognitionLanguage">
                            <option value="zh-CN">中文</option>
                            <option value="en-US">English</option>
                        </select>
                    </div>
                </div>
                
                <div class="setting-group">
                    <h4>🎤 语音识别设置</h4>
                    <div class="setting-item">
                        <label>语音识别灵敏度:</label>
                        <input type="range" id="voiceSensitivity" min="0.1" max="1" step="0.1" value="0.7">
                        <span id="voiceSensitivityValue">0.7</span>
                    </div>
                    <div class="setting-item">
                        <label>自动停止时间(秒):</label>
                        <input type="range" id="autoStopTime" min="5" max="30" step="5" value="15">
                        <span id="autoStopTimeValue">15</span>
                    </div>
                </div>
                
                <div class="settings-actions">
                    <button class="save-settings-btn" onclick="saveSettings()">保存设置</button>
                    <button class="reset-settings-btn" onclick="resetSettings()">重置默认</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 分院测试页面 -->
    <div id="sortingPage" class="sorting-page hidden">
        <div class="sorting-content">
            <div class="sorting-header">
                <h1>🎩 霍格沃茨分院测试</h1>
                <p>分院帽将决定你属于哪个学院</p>
            </div>
            
            <div class="sorting-hat-container">
                <div class="sorting-hat">🎩</div>
                <div class="sorting-message" id="sortingMessage">
                    点击开始测试，分院帽将为你选择最适合的学院...
                </div>
            </div>
            
            <div class="sorting-questions" id="sortingQuestions" style="display: none;">
                <div class="question-container">
                    <h3 id="questionText">问题将在这里显示...</h3>
                    <div class="answer-options" id="answerOptions">
                        <!-- 答案选项将在这里动态生成 -->
                    </div>
                </div>
            </div>
            
            <div class="sorting-result" id="sortingResult" style="display: none;">
                <div class="house-result">
                    <h2 id="houseName">学院名称</h2>
                    <div class="house-crest-large" id="houseCrest"></div>
                    <p id="houseDescription">学院描述</p>
                    <div class="house-traits">
                        <h3>学院特质：</h3>
                        <ul id="houseTraits">
                            <!-- 特质列表将在这里动态生成 -->
                        </ul>
                    </div>
                </div>
            </div>
            
            <div class="sorting-actions">
                <button id="startSortingBtn" class="sorting-action-btn">开始分院</button>
                <button id="backToWelcomeBtn" class="sorting-action-btn secondary">返回欢迎页面</button>
            </div>
        </div>
    </div>
    
    <!-- 魔杖测试页面 -->
    <div id="wandPage" class="wand-page hidden">
        <div class="wand-content">
            <div class="wand-header">
                <h1>🪄 魔杖选择测试</h1>
                <p>魔杖选择巫师，让奥利凡德为你找到最适合的魔杖</p>
            </div>
            
            <div class="wand-shop-container">
                <div class="wand-shop">🏪</div>
                <div class="wand-message" id="wandMessage">
                    点击开始测试，奥利凡德将为你选择最适合的魔杖...
                </div>
            </div>
            
            <div class="wand-questions" id="wandQuestions" style="display: none;">
                <div class="question-container">
                    <h3 id="wandQuestionText">问题将在这里显示...</h3>
                    <div class="answer-options" id="wandAnswerOptions">
                        <!-- 答案选项将在这里动态生成 -->
                    </div>
                </div>
            </div>
            
            <div class="wand-result" id="wandResult" style="display: none;">
                <div class="wand-result-content">
                    <h2 id="wandName">魔杖名称</h2>
                    <div class="wand-details">
                        <p id="wandWood">木材：</p>
                        <p id="wandCore">杖芯：</p>
                        <p id="wandLength">长度：</p>
                        <p id="wandFlexibility">弹性：</p>
                    </div>
                    <p id="wandDescription">魔杖描述</p>
                    <div class="wand-traits">
                        <h3>魔杖特质：</h3>
                        <ul id="wandTraits">
                            <!-- 特质列表将在这里动态生成 -->
                        </ul>
                    </div>
                </div>
            </div>
            
            <div class="wand-actions">
                <button id="startWandBtn" class="wand-action-btn">开始测试</button>
                <button id="backToWelcomeFromWandBtn" class="wand-action-btn secondary">返回欢迎页面</button>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>
